
$colorL: #ff9926;

.clearfix::after{
  display: block;
  content: '';
  clear: both;
}

.main {
  width: 1200px;
  margin: 0 auto;
  .mian-path {
    p {
      color: #969696;
      height: 66px;
      line-height: 70px;
      font-size: 16px;
      padding-left: 26px;
      background: url("../img/home.png") no-repeat 4px center;
      a {
        color: #969696;
        &:hover {
          color: red;
        }
      }
    }
  }

  .h5-left{
    float: left;
    width: 830px;
    border: 1px solid #eee;
    border-radius: 10px;
    .n-d-top{
      width: 100%;
      height: 180px;
      border-bottom: 1px dashed #eaeaea;
      .n-d-t-left{
        float: left;
        width: 120px; height: 120px;
        margin: 25px 8px;
        border-radius: 20px;
        overflow: hidden;
        a img{
          width: 100%; height: 100%;
        }
      }
      .n-d-t-center{
        float: left;
        width: 500px; height: 120px;
        margin: 25px 5px;
        font-family: Microsoft YaHei;
        .ndtc_1{
          height: 36px;
          line-height: 36px;
          font-size: 24px;
          a{
            color: #000;
          }
          a:hover{
            color: #ff6200;
            text-decoration: underline;
          }
        }
        .ndtc_2{
          font-size: 12px;
          line-height: 34px;
          a{
            margin-right: 20px;
            color: #888;
          }
          i{
            margin-left: 20px;
            color: #999;
            b{
              font-weight: normal;
              color: red;
            }
          }
        }
        .ndtc_3{
          strong{
            display: inline-block;
            width: 300px;
            height: 12px;
            background: #f3f3f3;
            border-radius: 20px;
            margin: 3px 10px 0 0;
            overflow: hidden;
            em{
              display: block;
              height: 12px;
              background: $colorL;
            }
          }
        }
        .ndtc_4{
          margin-top: 8px;
          a{
            width: 130px;
            line-height: 38px;
            text-align: center;
            float: left;
            color: #fff;
            font-size: 14px;
            margin: 0 20px 0 0;
            cursor: pointer;
          }
          a:hover{
            opacity: 0.8;
          }
          a.start-game{
            background: #099cda;
          }
          a.get-gift{
            background: #f7a131;
          }
        }
      }
    }
    .gift-cont{
      margin: 0 12px;
      .g_n_d_tit{
        font-size: 16px;
        font-weight: bold;
        line-height: 30px;
        color: #555;
      }
      .gift_d_font{
        line-height: 20px;
        color: #888;
      }
    }
    .xg-gift{
      margin: 20px 0;
      .top{
        height: 50px;
        margin: 0 12px;
        background: url("../img/game-gift.gif") no-repeat 0 8px;
        border-bottom: 2px solid $colorL;
        .new-icon{
          float: left;
          font-size: 26px;
          text-indent: 40px;
          line-height: 50px;
        }
        .play{
          float: right;
          font-size: 16px;
          line-height: 50px;
          a{
            color: #555;
          }
        }
      }
      .xg-gift-list{
        padding: 10px 0;
        dl{
          float: left;
          width: 160px;
          padding-top: 16px;
          dt{
            border-radius: 10px;
            overflow: hidden;
            a{
              display: block;
              width: 120px; height: 120px;
              margin: 0 auto;
              img{
                width: 100%; height: 100%;
              }
            }
          }
          dd{
            padding: 8px 0;
            height: 12px;
            a{
              display: block;
              width: 100%;
              font-size: 12px;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #555555;
            }
          }
        }
      }
    }
  }

  .h5-right{
    float: right;
    width: 350px;

    > div {
      border: 1px solid #ddd;
      border-radius: 10px;
      .top{
        height: 50px;
        margin: 0 12px;
        border-bottom: 2px solid $colorL;
        .new-icon{
          float: left;
          font-size: 26px;
          text-indent: 40px;
          line-height: 50px;
        }
        .play{
          float: right;
          font-size: 16px;
          line-height: 50px;
          a{
            color: #555;
          }
        }
      }
    }
    .user-info{
      width: 100%;
      //未登录
      dl.u_i_no{
        display: none;
        dd{
          width: 100%;
          margin-top: 20px;
          input{
            display: block;
            width: 220px;
            height: 38px;
            border: 1px solid $colorL;
            margin: 10px auto;
            color: $colorL;
            background: #fff;
            cursor: pointer;
          }
          input:hover{
            color: #fff;
            background: $colorL;
          }
        }
        dt{
          width: 100%;
          padding-bottom: 15px;
          font-size: 12px;
          span{
            display: block;
            text-align: center;
            margin-top: 10px;
            a{
              color: #0685f6;
            }
          }
        }
      }
      //已登录
      dl.u_i_yes{
        position: relative;
        dd{
          img{
            float: left;
            width: 90px; height: 90px;
            margin: 30px 0 0 30px;
            border-radius: 50%;
            overflow: hidden;
          }
          strong,span{
            display: inline-block;
            width: 210px;
            height: 30px;

            text-indent: 10px;
          }
          strong{
            margin-top: 40px;
            font-size: 20px;
          }
          span{
            margin-top: 20px;
            color: #999;
            em{
              color: red;
            }
          }
        }
        dt{
          padding-bottom: 25px;
          input{
            display: inline-block;
            width: 140px;
            height: 30px;
            margin: 10px 15px;
            border: 1px solid $colorL;
            background: #fff;
            color: $colorL;
          }
          input:hover{
            color: #fff;
            background: $colorL;
          }
        }
      }
    }

    .kf-game{
      margin-top: 15px;
      .top .new-icon{
        background: url("../img/game-kf.png") no-repeat 0 8px;
      }
      .game-list{
        margin: 0 12px;
        table{
          width: 100%;
          font-size: 12px;
          tr{
            height: 34px;
            line-height: 34px;
            th{
              color: #555;
            }
          }
          tr{
            height: 34px;
            line-height: 34px;
            border-bottom: 1px dashed #ccc;
            .t_1{
              width: 40px;
              text-align: left;
              color: #999;
            }
            .t_2{
              width: 80px;
              text-align: left;
            }
            .t_3{
              width: 80px;
              text-align: right;
            }
            .t_4{
              width: 44px;
              text-align: center;
              a{
                padding: 5px;
                border: 1px solid $colorL;
                background: #fff;
                color: $colorL
              }
            }
          }
          tr:last-child{
            border: 0;
          }
          tr:hover{
            td{
              color: $colorL
            }
            td a{
              background: $colorL;
              color: #fff;
            }
          }
        }
      }
    }

    .hot-num{
      margin-top: 15px;
      .top .new-icon{
        background: url("../img/game-news.png") no-repeat 0 8px;
      }
      ul.list{
        margin: 12px;
        font-size: 12px;
        li{
          position: relative;
          width: 100%;
          margin: 4px 0;
          float: left;
          div.h_d_1{
            display: none;
          }
          div.h_d_2{
            float: left;
            width: 70%;
            strong{
              position: absolute; top: 0; bottom: 0; left: 5px;
              margin: auto;
              display: block;
              width: 9px; height: 9px;
              border: 2px solid $colorL;
              border-radius: 50%;
            }
            p{
              float: left;
              height: 25px;
              margin-left: 28px;
              line-height: 25px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              a{
                color: #333;
              }
            }
            span{
              display: none;
            }
            em{
              display: none;
            }
          }
          div.h_d_3{
            position: absolute; top: 0; bottom: 0; right: 15px;
            margin: auto;
            width: 52px; height: 22px;
            background: #fff;
            a{
              display: block;
              width: 50px; height: 20px;
              border: 1px solid #888;
              line-height: 20px;
              text-align: center;
              color: #888;
            }
          }
        }
        li.active{
          div.h_d_1{
            display: block;
            position: absolute; top: 50%; left: 0;
            margin-top: -30px;
            width: 60px; height: 60px;
            a{
              display: block;
              width: 100%; height: 100%;
              img{
                width: 100%; height: 100%;
              }
            }
          }
          div.h_d_2{
            float: left;
            width: 55%;
            margin-left: 70px;
            strong{
              display: none;
            }
            p{
              height: 25px;
              margin-left: 0px;
              line-height: 25px;
              font-size: 14px;
              font-weight: bold;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              a{
                color: #333;
              }
              a:hover{
                color: $colorL;
                text-decoration: underline;
              }
            }
            span{
              display: inline-block;
              text-align: left;
              line-height: 25px;
            }
            em{
              display: block;
              width: 100%;
              float: left;
              color: #999999;
              font-style: normal;
              i{
                color: #ff0000;
              }
            }
          }
          div.h_d_3{
            position: absolute; top: 50%; right: 15px;
            margin-top: -11px;
            width: 52px; height: 22px;
            background: $colorL;
            a{
              display: block;
              width: 50px; height: 20px;
              border: 1px solid $colorL;
              line-height: 20px;
              text-align: center;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
